<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>placeOrder</title>
	<!-- 引入swiper -->
	<link rel="stylesheet" href="js/swiper-2.7.6/swiper.min.css">
	<!-- 引入字体图标 -->
	<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
	<!-- Bootstrap -->
	<link href="js/bootstrap/bootstrap.min.css" rel="stylesheet">
	<!-- 引入全局配置 -->
	<link rel="stylesheet" type="text/css" href="css/start.css">

	<!--引入公共样式-->
	 <link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/homepage.css">
</head>

<body class="id-con">
<div id="header">
    <div class="top">
        <div class="top-left">
            <i class="fa fa-map-marker "></i>
            <a href="javascript:void(0)" class="one">广州</a>
            <a href="javascript:void(0)" class="two">切换城市</a>
        </div>
        <div class="top-right">
            <a class="one">
                <i class="fa fa-user"></i> 朱莉
            </a>
            <a href="javascript:void(0)">退出</a>
            <a href="javascript:void(0)">帮助中心</a>
            <a href="javascript:void(0)">网站导航</a>
            <a href="javascript:void(0)">手机APP</a>
        </div>

    </div>
    <div class="searchBox">
        <div class="search">
            <div class="search-left">
                <h3>互生 <small>商务服务</small></h3>
            </div>
            <div class="search-right">
                <div class="one">
                    <input type="text" name="search" id="search" value="" placeholder="输入商家名称、分类或地区" />
                    <a href="javascript:void(0)">
                        <i class="fa fa-search"></i>
                    </a>
                </div>
                　　　
                <div class="two">
                    <a href="#">运动健身</a>
                    <a href="#">瑜伽</a>
                    <a href="#">羽毛球</a>
                    <a href="#">CS</a>
                    <a href="#">农家乐</a>
                    <a href="#">私人影院</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="shop container clearfix"">
<div class="shop-left fl">
    <div class="preview fl" id="swiper">
        <script id="swiper-script" type="text/html">
            <div class="view-top">
                <img class="top1" src="{{picUrl+data.img[0]}}" alt="">
            </div>
            <div class="view-thumb">
                {{each data.img value index}}
                <img class="{{index==0?'banner thumb-fc fl':'banner thumb-oc'}}" src="{{picUrl+value}}" alt="">
                {{/each}}
            </div>
        </script>
    </div>
    <div class="shop-con fl" >
        <div id="goods-detail">
            <script id="goods-detail-script" type="text/html">
                <div class="tip1">
                    <div class="goodsname fl">{{data.goodsName}}</div>
                    <% if (data.serviceType == 1) { %>
                    <div class="visit fl">上门</div>
                    <% } %>
                </div>
                <div class="onsale">{{data.goodsAdvantage}}</div>
                <div class="price">
                    <span>价格</span>
                    <img class="jinbi" src="img/yhq2.png" alt="">
                    <span class="only">{{data.hsPrice}}</span>
                    <span class="cost">¥{{data.originalPrice}}</span>
                    <img class="pv" src="img/yhq3.png" alt="">
                    <span class="jifen">{{data.perPoint}}</span>
                </div>
                <div class="dikou">
                    <img class="quan" src="img/yhq1.png" alt="">
                    <span class="full">每满{{data.discountMoney}}元可使用10元抵扣券{{data.discountNum}}张</span>
                </div>
                <div class="stime">
                    <span class="fl">服务时间</span>
                    {{each data.choiceDayVoList value index}}
                    <div class="{{index==0?'sldate select fl':'sldate fl'}}" data-date-long="{{value.dateLong}}">
                        <div class="week">{{value.weekName}}</div>
                        <div class="date">{{value.dateName}}</div>
                    </div>
                    {{/each}}
                </div>
            </script>
        </div>
        <div class="time" id="time">
            <script id="time-script" type="text/html">
                {{if data.length != 0}}
                {{each data value }}
                <span class="hour">{{value}}</span>
                {{/each}}
                {{/if}}
                {{if data.length == 0}}
                <span>当天暂无服务时间</span>
                {{/if}}
            </script>
        </div>
        <div class="number">
            <span class="fl">数量</span>
            <div class="red fl">-</div>
            <div class="amount fl">1</div>
            <div class="add fl">+</div>
        </div>
        <div class="staff">
            <span class="cansl fl">服务人员(可选)</span>
            <div class="slstaff fl">请选择服务人员</div>
            <div class="cue fl">重要提示:服务人员不能提供服务时,可协商变更</div>
            <div class="staff-box" id="staff-box">
                <script id="staff-script" type="text/html">
                    {{if type == 0}}
                    <p class="staff-text">{{data}}</p>
                    {{/if}}
                    {{if type == 1}}
                    {{each data value}}
                    <div class="staff-list clearfix fl" data-people-id="{{value.id}}">
                        <img class="staffhead fl" src="{{picUrl+value.headUrl}}" alt="">
                        <div class="staff-detail fl">
                            <div class="staffname">{{value.jobName}}</div>
                            <div class="stminor">{{value.servicePost}}</div>
                            <div class="stminor">
                                <span>{{value.sex==0?'女':'男'}}</span>
                                <span class="age">{{value.age}}岁</span>
                                <span>从业{{value.workedYears}}年</span>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                    <div class="confirm fl">确定</div>
                    {{/if}}
                </script>
            </div>
        </div>
        <div class="catch" id="catch">
            <script id="catch-script" type="text/html">
                {{each data value}}
                <div class="catch-list fl" data-remove-id="{{value.id}}">
                    <img class="sthead fl" src="{{picUrl+value.headUrl}}" alt="">
                    <span class="fl">{{value.jobName}}</span>
                    <img class="close" src="img/close.png" alt="">
                </div>
                {{/each}}
                <div class="clear-both"></div>
            </script>
        </div>
        <div class="buy">
            <div class="buynow">立即购买</div>
        </div>
        <div class="promise" id="promise">
            <script id="promise-script" type="text/html">
                <span>服务承诺</span>
                {{if data.refundRule == 0}}
                <img src="img/return.png" alt="">
                <span class="tui">随时退</span>
                {{/if}}
                {{if data.refundRule == 1}}
                <img src="img/return.png" alt="">
                <span class="tui">售出不退</span>
                {{/if}}
                {{if data.refundRule == 0}}
                <div class="illu fr">退款规则说明</div>
                <div class="illu-box">
                    <p>退款规则使用:</p>
                    <p>{{data.refundNotes}}</p>
                </div>
                {{/if}}
            </script>
        </div>
    </div>
</div>
<div class="shop-right fr" id="shop-right">
    <script id="shop-right-script" type="text/html">
        <div class="shophead">
            <img src="{{data.shopLogo}}" alt="">
        </div>
        <div class="shopname">
            <span>{{data.shopName}}</span>
            <img src="img/huiz.png" alt="">
        </div>
        <div class="shopcode">
            <span>{{data.entResno}}</span>
        </div>
        <div class="shoptel clearfix">
            <span class="fl">商家电话：</span>
            <div class="minor">{{data.shopPhone}}</div>
        </div>
        <div class="shopadd clearfix">
            <span class="fl">商家地址：</span>
            <div class="minor">{{data.shopAddress}}<span class="map">[地图]</span></div>
        </div>
        <div class="busitime clearfix">
            <span class="fl">营业时间：</span>
            {{if data.serviceTimeType == 0}}
            <div class="minor">{{data.serviceRangeTime}}</div>
            {{/if}}
            {{if data.serviceTimeType == 1}}
            {{each data.week value}}
            <div class="minor">周{{value.start}}至周{{value.end}} {{value.startTime}}至{{value.endTime}}</div>
            {{/each}}
            {{/if}}
        </div>
        <div class="connect">
            <img src="img/im.png" alt="">
            <span>联系商家</span>
            <i id="focus-heard" class="{{data.collectState==0?'fa fa-heart-o':'fa fa-heart'}}" aria-hidden="true"></i>
            <span class="focus-shop">关注店铺</span>
        </div>
        <div class="goshop-box">
            <div class="goshop" onclick="Tohref('fitness.html?shopId='+shopId)">进店逛逛</div>
        </div>
    </script>
</div>
</div>

<div class="service container clearfix">
    <div class="sertab clearfix">
        <div class="tab-list tab-service">服务详情</div>
        <div class="tab-list tab-notice">购买须知</div>
        <div class="tab-list tab-pic">图文详情</div>
        <div class="tab-list">
            <a href="#evaluate">用户评价</a>
        </div>
    </div>
    <div class="tab-box">
        <div class="service-box" id="service-box">
            <script id="service-box-script" type="text/html">
                <div class="tab-title">服务详情</div>
                <div class="tab-con">
                    {{each data.list1 value}}
                    <div class="price-list clearfix">
                        <div class="warename fl">{{value.itemName}}</div>
                        <div class="warecount fl">1{{value.itemNnit}}</div>
                        <div class="wareprice fl">{{value.itemSubtotal}}元</div>
                    </div>
                    {{/each}}
                    <div class="total clearfix">
                        <div class="totalcost fl">总价值</div>
                        <div class="totalprice fl">{{data.originalPrice}}元</div>
                    </div>
                    <div class="total clearfix">
                        <div class="totalcost hlcolor fl">销售价</div>
                        <div class="totalprice hlcolor fl">{{data.hsPrice}}元</div>
                    </div>
                </div>
            </script>
        </div>
        <div class="notice-box" id="notice-box">
            <script id="notice-box-script" type="text/html">
                <div class="tab-title">购买须知</div>
                <div class="notice-con clearfix">
                    <div class="notice-left fl">
                        <div class="notice-key">有效期</div>
                        <div class="notice-key">预约信息</div>
                        {{if data.aheadNoteArr.length && data.aheadNote}}
                        <div class="notice-key"></div>
                        {{/if}}
                        <div class="notice-key">使用人数</div>
                        <div class="notice-key">规则提醒</div>
                        <div class="notice-key">商家服务</div>
                        <% for(var i = 0; i < data.list3.length-1; i++){ %>
                        <% if (data.list3[i] != 0) { %>
                        <div class="notice-key"></div>
                        <% } %>
                        <% } %>
                        <div class="notice-key">温馨提示</div>
                    </div>
                    <div class="notice-right">
                        <div class="right-list fl">
                            <div class="notice-point fl">·</div>
                            <div class="notice-value">{{data.validStartTime}}至{{data.vaildEndTime}}</div>
                        </div>
                        <div class="right-list fl">
                            <div class="notice-point fl">·</div>
                            {{if data.bookFlag==1}}
                            {{if data.aheadNote}}
                            <div class="notice-value">请您提前{{data.aheadNote}}预约</div>
                            {{/if}}
                            {{if data.aheadNoteArr.length}}
                            <div class="notice-point fl">·</div>
                            <div class="notice-value">{{data.aheadNoteArr[0]}}请提前{{data.aheadNoteArr[1]}}{{data.aheadNoteArr[2]}}</div>
                            {{/if}}
                            {{/if}}
                            {{if data.bookFlag==0}}
                            <div class="notice-value">不需要预约</div>
                            {{/if}}
                        </div>
                        <div class="right-list fl">
                            <div class="notice-point fl">·</div>
                            <div class="notice-value">每张团购券最多{{data.applyNumber}}人使用</div>
                        </div>
                        <div class="right-list fl">
                            <div class="notice-point fl">·</div>
                            <div class="notice-value">{{data.useRule}}</div>
                        </div>
                        <div class="right-list fl">
                            <% for(var i = 0; i < data.list3.length; i++){ %>
                            <div class="notice-point fl">·</div>
                            <div class="notice-value">{{data.list3[i]==1?'提供免费WiFi':data.list3[i]}}</div>
                            <% } %>
                        </div>
                        <div class="right-list fl">
                            <div class="notice-point fl">·</div>
                            <div class="notice-value">{{data.reminder}}</div>
                        </div>
                    </div>
                </div>
            </script>
        </div>
        <div class="pic-box" id="pic-box">
            <script id="pic-box-script" type="text/html">
                <div class="tab-title">图文详情</div>
                <p>{{data.goodsDetail}}</p>
                {{each data.img value}}
                <img src="{{picUrl+value}}" alt="">
                {{/each}}
            </script>
        </div>
    </div>
    <div id="evaluate" class="evaluate container">
        <div class="eva-title">用户评价</div>
        <div class="rate clearfix" id="rate">
            <script id="rate-script" type="text/html">
                <div class="ratenum fl">{{data.pingfen}}</div>
                <div class="ratestar fl">
                    <div class="comprate">综合评分</div>
                    <div class="star">
                        <% for(var i = 0; i < data.round; i++){ %>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <% } %>
                        <% for(var i = 0; i < data.cha; i++){ %>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <% } %>
                    </div>
                </div>
                <div class="percent fl">好评率{{data.evaluateValue}}</div>
                <div class="evabox">
                    <div class="eva-list active" data-status="0">全部（{{data.nums}}）</div>
                    <div class="eva-list" data-status="1">好评（{{data.goodsV}}）</div>
                    <div class="eva-list" data-status="2">差评（{{data.badV}}）</div>
                    <div class="eva-list" data-status="3">有图（{{data.hasPic}}）</div>
                </div>
            </script>
        </div>
        <div class="foureva" id="foureva">
            <div class="alleva-box">
                <div id="usereva-box">
                    <script id="usereva-box-script" type="text/html">
                        {{each data value}}
                        <div class="usereva clearfix">
                            <img class="userhead fl" src="{{picUrl+value.userHeadUrl}}" alt="">
                            <div class="usereva-right fr">
                                <div class="eva-date clearfix">
                                    <div class="date-left fl">
                                        <div class="username">{{value.userName}}</div>
                                        <div class="star">
                                            <% for(var i = 0; i < value.evaluateValue; i++){ %>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <% } %>
                                            <% for(var i = 0; i < value.cha; i++){ %>
                                            <i class="fa fa-star-o" aria-hidden="true"></i>
                                            <% } %>
                                        </div>
                                    </div>
                                    <div class="rightdate fr">{{value.evaluateTime}}</div>
                                </div>
                                <div class="eva-con">{{value.evaluateContent}}</div>
                                <div class="eva-pic">
                                    <% for(var i = 0; i < value.evaluateImgs.length; i++){ %>
                                    <img src="{{picUrl+value.evaluateImgs[i]}}" alt="">
                                    <% } %>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </script>
                </div>
                <div class="viewmore">查看更多评价<img src="img/viewmore.png" alt=""></div>
            </div>
        </div>
    </div>
</div>
<div class="foot" id="foot">
    <p>
        <strong>客服热线： </strong>
        <a href="javascript:void(0)">
            0755-83344111
        </a>
        <span class="foot-adition">2013-2018 </span>
        <span>
				深圳市互生电子商务有限公司
			</span>
        <span>
				粤ICP备案号14100052号
			</span>
    </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script type="text/javascript" src="js/artTemplate/template.js"></script>
<script type="text/javascript" src="js/common/itemDetail.js"></script>
<script>

    // tab栏
    $(".sertab div").click(function() {
        $(this).css("border-bottom", "2px solid #F93D28").siblings().css("border-bottom", "2px solid #fff")
    })
    $(".tab-service").click(function() {
        $(".service-box").css("display", "block").siblings().css("display", "none")
    });
    $(".tab-notice").click(function() {
        $(".notice-box").css("display", "block").siblings().css("display", "none")
    });
    $(".tab-pic").click(function() {
        $(".pic-box").css("display", "block").siblings().css("display", "none")
    })
    // 评价tab
    $(".evabox div").click(function() {
        $(this).css({
            "background": "url(img/evatab.png) no-repeat",
            "color": "#fff"
        }).siblings().css({
            "background": "none",
            "color": "#000"
        })
    })
</script>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/common/jquery-1.12.2.js"></script>

<!-- 引入swiper插件 -->
<script type="text/javascript" src="js/swiper-2.7.6/swiper.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- 让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<script type="text/javascript" src="js/common/respond.min.js"></script>
<script type="text/javascript" src="js/common/html5.min.js"></script>
<script type="text/javascript" src="js/common/common.js"></script>
<script type="text/javascript">
  var mySwiper = new Swiper('.swiper-container', {
    swipeToNext: true,
    pagination : '.pagination',
    paginationClickable: true,
    autoplay: 5000, //可选选项，自动滑动
    loop: true, //可选选项，开启循环

  })
  $('#prve').click(function(){
  mySwiper.swipePrev();
  })
  $('#next').click(function(){
  mySwiper.swipeNext();
})
</script>




</html>
